<template>
  <div class="score_list">
    <div class="hanner_img_title">
      <strong>{{semesterData.specialtyName}}</strong>
      <p>{{semesterData.kkxqName}}</p>
    </div>
    <van-tabs v-model="active" color="#027FFE" title-active-color="#027FFE" line-width="40px" @click="openTab">
      <van-tab title="考核要求" name="a">
        <div v-if="semesterData" class="tab_item_a">
          <div class="Compile_body_format" v-html="semesterData.checkRequired">{{semesterData.checkRequired}}</div>
        </div>
        <div class="footer_btn">
          <button  @click="openTab ('b')">了解本学期课程</button>
        </div>
      </van-tab>
      <van-tab title="课程列表" name="b">
        <div class="tab_score_item">
          <div class="tab_kc">
            <div class="tab_item">
              <p>本学期课程 <img src="../../../assets/img/modules/score/score_16.png" alt=""></p>
              <strong>{{courseData.courseTotal}} <span>门</span></strong>
            </div>
            <div class="tab_item">
              <p>已通过考核的课程<img src="../../../assets/img/modules/score/score_16.png" alt=""></p>
              <strong>{{courseData.courseAchieve}} <span>门</span></strong>
            </div>
          </div>
          <div class="tab_list">
            <div class="tab_item" v-for="(item, index) in courseData.courseList" :key="item.courseName + '' + index"  @click="goCoureIndex(item.courseId, item.classId, 0)">
              <img :src="'http://m.oucgz.cn/images/ico_'+index%12+'.png'" alt="">
              <div class="item_text_body">
                <h3>{{item.courseName}}</h3>
                <p>平时成绩： {{item.studyScore}}学分  期末考试成绩： {{item.examScore}}分</p>
                <img v-if="item.examState === '0'" class="label_img" src="../../../assets/img/modules/score/score_11.png" alt="">
                <img v-if="item.examState === '1'" class="label_img" src="../../../assets/img/modules/score/score_14.png" alt="">
                <img v-if="item.examState === '2'" class="label_img" src="../../../assets/img/modules/score/score_15.png" alt="">
                <img v-if="item.examState === '3'" class="label_img" src="../../../assets/img/modules/score/score_13.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div v-if="courseData.remedyCourseList.length > 0" class="tab_score_item">
          <div class="tab_kc">
            <div class="tab_item">
              <p>本学期需要补休课程 <img src="../../../assets/img/modules/score/score_16.png" alt=""></p>
              <strong>{{courseData.remedyTotal}} <span>门</span></strong>
            </div>
            <div class="tab_item">
              <p>已完成课程<img src="../../../assets/img/modules/score/score_16.png" alt=""></p>
              <strong>{{courseData.remedyComplete}} <span>门</span></strong>
            </div>
          </div>
          <div class="tab_list">
            <div class="tab_item" v-for="item in courseData.remedyCourseList" :key="item" @click="goCoureIndex(item.courseId, item.classId, 0)">
              <img :src="'http://m.oucgz.cn/images/ico_'+index%12+'.png'" alt="">
              <div class="item_text_body">
                <h3>{{item.courseName}}</h3>
                <p>平时成绩： {{item.studyScore}}学分  期末考试成绩： {{item.examScore}}分</p>
                <img v-if="item.examState === '0'" class="label_img" src="../../../assets/img/modules/score/score_11.png" alt="">
                <img v-if="item.examState === '1'" class="label_img" src="../../../assets/img/modules/score/score_14.png" alt="">
                <img v-if="item.examState === '2'" class="label_img" src="../../../assets/img/modules/score/score_15.png" alt="">
                <img v-if="item.examState === '3'" class="label_img" src="../../../assets/img/modules/score/score_13.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="作业列表" name="c">
        <div v-if="courseData.openStatus === '1'" class="work_list">
          <div  v-for="(item, index) in courseData.courseList" :key="item.courseName + '' + index" class="work_item" @click="goCoureIndex(item.courseId, item.classId, 2)">
            <div class="title_name">
              <span>{{item.courseName}}</span>
              <van-icon name="arrow" />
            </div>
            <div class="tab_list">
              <div class="tab_item">
                <strong>{{item.homeworkTotal}} <span>个</span></strong>
                <p>共有作业</p>
              </div>
              <div class="tab_item">
                <strong>{{item.homeworkAchieve}} <span>个</span></strong>
                <p>已做作业</p>
              </div>
              <div class="tab_item">
                <strong>{{item.studyScore}}  <span>分</span></strong>
                <p>共获平时成绩</p>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="no_work">
          <img  src="../../../assets/img/modules/score/no_homework.png" alt="">
          <p>本学期作业暂未开放</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: 'score_list',
  components: {},
  data () {
    return {
      courseData: {
        remedyCourseList: []
      },
      workData: [],
      active: 'a',
      dayTime: 0,
      semesterData: {
        specialtyName: '',
        kkxqName: ''
      }
    }
  },
  props: {},
  watch: {},
  methods: {
    goCoureIndex (courseId, classId, index) {
      if (index !== '0') {
        // eslint-disable-next-line no-undef
        Phone.goCourseIndex(courseId, classId, index)
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/8 0008 10:22
     *@function  获取课程情况
     *****************************************/
    getCourse () {
      this.$http({
        url: `${window.SITE_CONFIG['personalListURL']}/api/courseNew/termCourseList?studentId=${this.$store.state.score.studentId}&gradeId=${this.$store.state.score.gradeId}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.msgCode !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.courseData = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/8 0008 10:22
     *@function  获取学习统计信息
     *****************************************/
    getData () {
      this.$http({
        url: `${window.SITE_CONFIG['personalListURL']}/api/courseNew/specialtyStudyStatis?lessonMonth=${this.dayTime}&studentId=${this.$store.state.score.studentId}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.msgCode !== 200) {
          this.$toast('请求失败，请重试')
          return false
        }
        this.semesterData = res.data
      }).catch(() => {})
    },
    openTab (value) {
      this.active = value
      if (value === 'a') {
        this.getData()
      }
      if (value === 'b') {
        this.getCourse()
      }
      if (value === 'c') {
        this.getCourse()
      }
    },
    getNowFormatDate () {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      this.dayTime = year + month + strDate
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')

    this.getNowFormatDate()
    if (this.$route.query.studentId) {
      this.$store.state.score.studentId = this.$route.query.studentId
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    if (this.$route.query.gradeId) {
      this.$store.state.score.gradeId = this.$route.query.gradeId
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    if (this.$route.query.active) {
      this.$store.state.score.active = this.$route.query.active
      localStorage.setItem('stateData', JSON.stringify(this.$store.state))
    }
    this.active = this.$store.state.score.active
    this.openTab(this.active)
    this.getData()
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .score_list {
    max-width: 750px;
    margin: 0 auto;
    .hanner_img_title{
      width: 750px;
      height: 170px;
      background: url("../../../assets/img/modules/score/list_01.png") no-repeat center;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      strong{
        font-size:38px;
        color: #ffffff;
      }
      p{
        font-size:28px;
        color: #ffffff;
        margin: 10px;
      }
    }
    .tab_item_a{
      padding: 60px 32px;
      strong{
        font-size:36px;
        color:rgba(34,34,34,1);
        display: block;
        margin-bottom: 20px;
      }
      .title_text{
        font-size:28px;
        color:rgba(34,34,34,1);
        margin-bottom: 40px;
        line-height: 40px;
      }
      p{
        font-size:28px;
        color:rgba(102,102,102,1);
        line-height: 45px;
      }
    }
    .footer_btn{
      height:148px;
      background:rgba(255,255,255,1);
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      button{
        width:690px;
        height:88px;
        border: 0;
        background:rgba(2,127,254,1);
        border-radius:4px;
        font-size:32px;
        color: #ffffff;
      }
    }
    .tab_score_item{
      padding: 32px 32px 80px 32px;
      margin-top: 14px;
      background-color: #ffffff;
      .title{
        font-size: 36px;
        color: #4A4A4A;
        letter-spacing: 0;
        text-align: center;
        font-family: PingFangSC-Semibold;
        margin: 45px 0;
        text-align: center;
      }
      .tab_kc{
        display: flex;
        align-content: center;
        justify-content: center;
        margin: 60px 0;
        .tab_item{
          flex: 1;
          text-align: center;
          strong{
            font-size: 52px;
            color: #1F93FD;
            letter-spacing: 0;
            display: block;
            span{
              font-size:24px;
              font-weight:normal;
              color:rgba(34,34,34,1);
            }
          }
          p{
            font-size: 22px;
            color: #666666;
            letter-spacing: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 28px;
              height: 28px;
              margin-left: 15px;
            }
          }
        }
      }
      .tab_list{
        .tab_item{
          background:rgba(246,246,246,1);
          border-radius: 8px;
          margin-top: 30px;
          padding: 20px;
          position: relative;
          width:686px;
          height:160px;
          img{
            width: 120px;
            height: 120px;
            position: absolute;
          }
          .item_text_body{
            padding: 20px 20px 20px 150px;
            position: relative;
            border-radius: 8px;
            margin: -20px -20px -20px 0;
            h3{
              font-size: 32px;
              color: #222222;
              letter-spacing: 0;
              line-height: 32px;
              margin: 20px 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow:hidden;
            }
            p{
              font-size: 24px;
              color: #666666;
              letter-spacing: 0;
              line-height: 24px;
              margin: 20px 0;
            }
            .label_img{
              position: absolute;
              width: auto;
              height: 36px;
              top: -8px;
              left: 530px;
            }
          }
        }
      }
    }
    .work_list{
      margin-top: 14px;
      background-color: #ffffff;
      padding: 40px 60px;
      .title_name{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          font-size:32px;
          color:rgba(34,34,34,1);
        }
        i{
          font-size: 32px;
          color: #999999;
        }
      }
      .tab_list{
        margin: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .tab_item{
          flex: 1;
          &:nth-child(2){
            text-align: center;
          }
          &:nth-child(3){
            text-align: right;
          }
          strong{
            font-size:52px;
            font-weight:bold;
            display: block;
            color:rgba(31,147,253,1);
            span{
              font-size:22px;
              font-weight: normal;
              color:rgba(102,102,102,1);
            }
          }
          p{
            font-size:24px;
            color:rgba(102,102,102,1);
          }
        }
      }
    }
    .no_work{
      padding: 50px;
      text-align: center;
      img{
        display: block;
        margin: 0 auto;
        width: 400px;
      }
      p{
        font-size: 24px;
        color: #999999;
      }
    }
  }
</style>
